<template>

  <div class="list">

    <div class="carlist">
<!--      <div class="caritem" v-for="item of carlist" :key="item.cid">
        <div class="line1">
          <div class="carleft">
            <img :src="item.firimg">
          </div>
          <div class="carright">
            <h2>{{item.name}}</h2>
            <span>自动  {{item.sits}}座</span>
            <div class="price">
              <div>
                <span>{{item.fourfee}}/4小时</span>
              </div>
              <div>
                <span>{{item.eightfee}}/8小时</span>
              </div>
              <div>
                <span>{{item.dayfee}}/天</span>
              </div>
            </div>
          </div>
        </div>
        <div class="line2">
          <div class="carnum">还剩30辆</div>
          <div class="orderbtn" @click="order(item.cid)">立即租车</div>
        </div>

      </div>-->

      <div class="nlist"
           v-for="item of carlist"
           :key="item.cid"
           :style="`background: url(${item.firimg}) center center; background-size:cover;position:relative `"
           @click="order(item.cid)">
         <div class="ot">
              <div class="f"> {{item.name}} / 自动  {{item.sits}}座 / {{item.pl}}</div>
              <div class="s"> <span>{{item.fourfee}}/4小时</span>   <span>{{item.eightfee}}/8小时</span>  <span>{{item.dayfee}}/天</span> </div>
         </div>

      </div>

    </div>
    <div class="ht">
       <span @click="$router.push({name:'Home'})">首页</span>
       <span @click="$router.push({name:'Account'})">个人中心</span>
    </div>
  </div>
</template>

<script>
import { Toast } from 'mand-mobile'
export default {
  name: 'List',
  data () {
    return {
      carlist: []
    }
  },
  created: async function () {
    if (!this.$store.state.wxuser.openid && this.$route.query.openid) {
      // 根据 openid来获取用户信息
      let _u = await this.$api.post('/getUser', this.$route.query)
      if (_u.data.state) {
        // this.$store.commit('updateUser', _u.data.data)
        this.$store.dispatch('getUser')
      } else {
        Toast.failed('获取用户失败')
      }
    }
  },
  beforeMount: async function () {

  },
  mounted: async function () {
    this.getlist()
  },
  methods: {
    order: async function (cid) {
      this.$store.commit('updateOrder', {cid: cid})
      this.$router.push({ name: 'Order', params: {cid} })
    },
    getlist: async function () {
      Toast.loading('数据加载中...')
      let _res = await this.$api.post('/getlist')
      Toast.hide()
      if (_res.data.state) {
        let _carlist = _res.data.data
        for (let v of _carlist) {
          for (let _v of v.feestanders) {
            if (_v.hours === 24) {
              v.dayfee = _v.fee
            } else if (_v.hours === 8) {
              v.eightfee = _v.fee
            } else if (_v.hours === 4) {
              v.fourfee = _v.fee
            }
          }
        }
        this.carlist = _carlist
        // console.log(this.carlist)
      } else {
        Toast.failed('获取数据错误')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .br{
    border:1px solid red;
  }
  .home{
    background:url("../assets/bg.png") no-repeat;
    background-size: contain;
    position:relative;
  }

  .funs{
    height: 80%;
    width: 90%;
    position: absolute;
    bottom:15px;
    left:50%;
    transform: translateX(-50%);
  }
  .funtxt{
    height: 100px;
    color:#fff;
    text-shadow: 2px 2px 2px #ccc;
  }
  .funtxt > span{
    line-height: 50px;
  }
  .cs{
    height: 70%;
    position: absolute;
    bottom:0;
    background: #fff;
    width: 100%;
    border-radius: 5px;
    box-shadow: 2px 2px 3px rgba(0,0,0,.1);
    padding:15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .itemlabel{
    font-size: 12px;
    color:#666;

  }

  .itemipt{
    line-height: 50px;
    border-bottom:1px solid #e1e1e1
  }

  .cdate{
    margin:25px 0;
    position: relative;
    height: 120px;
  }
  .cdate>.rdate{

    height: 120px;
    width: 120px;
    border-radius: 50%;
    border:1px solid #6a78d0;
    left:50%;
    transform: translateX(-50%);
    position: absolute;
    text-align: center;
  }

  .sdate{
    width: 30%;
  }

  .sdate>span{
    font-size: 12px;
    color:#666;
    text-align: left;
  }
  .sdate>div:first-of-type{
    font-size: 18px;
  }

  .sdate:first-of-type{
    top:50%;
    transform: translateY(-50%);
    left:0;
    position: absolute;
  }
  .sdate:last-of-type{
    top:50%;
    transform: translateY(-50%);
    text-align: right;
    right:0;
    position:absolute;
  }
  .sdate>div:last-child{
    font-size: 12px;
    color:#666;
  }
  .cbtn{
    text-align: center;
    line-height: 55px;
    background: -webkit-linear-gradient(top left,#7986db,#6a78d0);
    color:#fff
  }
  .list{
    display: flex;
    flex-direction: column;
  }
  .carlist{
    height: 0;
    flex-grow: 1;
    overflow-y: scroll;
    padding:10px
  }
  .caritem{
    border-bottom:1px solid #e3e3e3;
    padding: 15px 3px;
  }
  .line1{
    display: flex;
  }
  .line1:after{
    content:'';
    display: block;
    clear:both;
    zoom: 1
  }
  .carleft{

    height: 80px;
    width: 80px;
  }

  .carleft > img{
    width: 70px;
    height: 70px;
  }
  .carright{
    width: 0;
    flex-grow: 1;

  }

  .carright  h2{
    font-size: 14px;
    font-weight: 500;
  }
  .carright > span{
    font-size: 12px;
    color:#666;
    padding-left:10px;
    border-left:2px solid #ccc
  }

  .price{
    display: flex;
  }
  .price > div {
    text-align: center;
    font-size: 14px;
    width: 0;
    flex-grow: 1;
    line-height: 30px;
    color:#333
  }
  .line2{
    display:flex;
    font-size: 14px;
    line-height: 35px;
  }
  .carnum{
    width: 80px;
    color:#666;
    font-size: 12px;
    text-align: center;

  }
  .orderbtn{
    width: 0;
    flex-grow:1;
    background: -webkit-linear-gradient(top left,#6a78d0,#7986db);
    color:#fff;
    text-align: center;
  }
  .list{
    background: #e1e1e1;
  }

  .nlist{
    height: 50vw;
    background: #fff;
    margin-bottom: 15px;
  }
  .ot{
    background: -webkit-linear-gradient(top,transparent,#2b2b2b);
    height: 60px;
    position: absolute;
    width: 100%;
    bottom:0;
    padding-top:12px;
    padding-left:8px;
    box-sizing: border-box;
    color:#fff;
    font-size: 13px;
  }
  .ht{
    height: 55px;
    background: rgba(255,255,255,.4);
    display: flex;
    font-size: 14px;
    color:#666;
    box-shadow: 1px -12px 10px rgba(0,0,0,.3);
    z-index: 999;

  }
  .ht > span{
    display: block;
    flex:1;
    line-height: 55px;
    text-align: center;
  }
  .ht > span:first-of-type{
    border-right:1px solid #e7e7e7
  }
</style>
